<template>
  <todo-page :visible.sync="visible">
    <div class="traceability-handle-container">
      <div class="header" header="处理">
        <a-button @click="closeModal()"> 返回 </a-button>
      </div>
      <div class="main">
        <!-- 锚点占位 -->
        <div id="topSpace"></div>
        <!-- 头部流程 -->
        <flowList
          :source="flowSource"
          replaceFields="taskNodeDesc"
          v-if="flowSource.length > 0"
          @click="flowListClick($event)"
        >
        </flowList>
        <!-- 页面提流程 -->
        <a-form-model ref="form" :model="formData" :rules="rules">
          <a-collapse v-model="activeKey" expandIconPosition="right">
            <a-collapse-panel
              :key="item.id"
              :show-arrow="false"
              :title="item.taskNodeDesc"
              v-for="item in pageFlowListSource"
              :id="item.$$id"
            >
              <template slot="header">
                <collapseHeader
                  :active="activeKey.includes(item.id)"
                  v-if="item.showInfo != '99'"
                >
                  <template>
                    <a-button
                      v-if="item.showInfo == 'BanHe'"
                      style="margin-right: 22px"
                      type="primary"
                      @click.stop="viewTestData(item)"
                    >
                      试验数据
                    </a-button>
                    <a-button
                      type="primary"
                      v-if="
                        item.showInfo == 'BanHe' ||
                        item.showInfo == 'YuLeiGuanYunShu' ||
                        item.showInfo == 'BuLiao' ||
                        item.showInfo == 'ZhenDao' ||
                        item.showInfo == 'ZhengYang' ||
                        item.showInfo == 'PenLin' ||
                        item.showInfo == 'ZhangLa' ||
                        item.showInfo == 'YaJiang' ||
                        item.showInfo == 'MoBanAnZhuang' ||
                        item.showInfo == 'MoBanChaiChu'
                      "
                      style="margin-right: 22px"
                      @click.stop="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </template>
                </collapseHeader>
              </template>
              <!------------ 信息中心下发任务单 ------------>
              <div
                class="base-info-container"
                v-if="item.showInfo == 'XiaDan'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 桥梁名称 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
                    <a-form-model-item label="桥梁名称">
                      <a-input
                        disabled
                        v-model="formData[item.id].bridgeName"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 幅别 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="幅别">
                      <a-input disabled v-model="formData[item.id].amClass" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 跨 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="跨">
                      <a-input disabled v-model="formData[item.id].span" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 梁号 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="梁号">
                      <a-input
                        disabled
                        v-model="formData[item.id].componentParts"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 梁类型 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="梁类型">
                      <a-input
                        disabled
                        v-model="formData[item.id].beamTypeDesc"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 下发人员 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="下发人员">
                      <a-input disabled v-model="formData[item.id].orderUser" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 下发时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="下发时间">
                      <a-input disabled v-model="formData[item.id].orderTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 出梁操作人 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="出梁操作人">
                      <a-input disabled v-model="formData[item.id].ylUser" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 计划生产时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="计划生产时间">
                      <a-input
                        disabled
                        :value="
                          (formData[item.id].planStartTime || '') +
                          '~' +
                          (formData[item.id].planEndTime || '')
                        "
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 计划出梁时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="计划出梁时间">
                      <a-input
                        disabled
                        :value="
                          (formData[item.id].planJqStartTime || '') +
                          '~' +
                          (formData[item.id].planJqEndTime || '')
                        "
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 实际生产时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="实际生产时间">
                      <a-input
                        disabled
                        :value="
                          (formData[item.id].actualStartTime || '') +
                          '~' +
                          (formData[item.id].actualEndTime || '')
                        "
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 实际出梁时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="实际出梁时间">
                      <a-input
                        disabled
                        :value="
                          (formData[item.id].actualJqStartTime || '') +
                          '~' +
                          (formData[item.id].actualJqEndTime || '')
                        "
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 现场接单 【可编辑】 -->
              <div
                class="base-info-container"
                v-if="
                  item.showInfo == 'XianChangJieDan' &&
                  item.currentStatus == '1'
                "
                v-loading="loading[item.id]"
              >
                <a-row>
                  <a-col
                    :xs="24"
                    :sm="24"
                    :md="24"
                    :lg="24"
                    :xl="12"
                    :xxl="12"
                    v-for="gx in gXInfoSource[item.id]"
                    :key="gx.id"
                  >
                    <a-form-model-item
                      class="item-label-max"
                      :label="gx.taskNodeDesc"
                      :prop="item.id + '.' + gx.taskNodeId"
                      :rules="{
                        required: true,
                        message: '请选择' + gx.taskNodeDesc + '(审批人员)',
                        trigger: ['change'],
                      }"
                    >
                      <a-select
                        :placeholder="'请选择' + gx.taskNodeDesc + '(审批人员)'"
                        mode="multiple"
                        :filter-option="filterOption"
                        label-in-value
                        :maxTagCount="4"
                        v-model="formData[item.id][gx.taskNodeId]"
                      >
                        <a-select-option
                          :value="gxs.key"
                          :label="gxs.value"
                          v-for="gxs in gx.$$select"
                          :key="gxs.key"
                        >
                          {{ gxs.value }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 现场接单 【不可编辑】 -->
              <div
                class="base-info-container"
                v-if="
                  item.showInfo == 'XianChangJieDan' &&
                  item.currentStatus != '1'
                "
                v-loading="loading[item.id]"
              >
                <a-row>
                  <a-col
                    :xs="24"
                    :sm="24"
                    :md="24"
                    :lg="24"
                    :xl="12"
                    :xxl="12"
                    v-for="gx in gXInfoSource[item.id]"
                    :key="gx.id"
                  >
                    <a-form-model-item
                      class="item-label-max"
                      :label="gx.taskNodeDesc"
                    >
                      <a-input disabled :value="gx.operatePtuser" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 钢筋加工 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'GangJinJiaGong'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 生产开始时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="生产开始时间">
                      <a-input
                        disabled
                        v-model="formData[item.id].produceTime"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 生产结束时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="生产结束时间">
                      <a-input
                        disabled
                        v-model="formData[item.id].completeTime"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 生产用量 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="生产用量(kg)">
                      <a-input
                        disabled
                        v-model="formData[item.id].produceUsage"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 质检人 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="质检人">
                      <a-input disabled v-model="formData[item.id].testName" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 质检时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="质检时间">
                      <a-input disabled v-model="formData[item.id].testTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 质检结果 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="质检结果">
                      <a-input
                        disabled
                        :value="
                          formData[item.id].testResult == 0 ? '合格' : '不合格'
                        "
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <!-- <a-row>
                  <a-col
                    v-for="gx in formData[item.id].produceList"
                    :key="gx.id"
                    :xs="24"
                    :sm="24"
                    :md="24"
                    :lg="24"
                    :xl="24"
                    :xxl="12"
                  >
                    <a-row>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item label="钢筋型号">
                          <a-input :value="gx.rebarTypeDesc" disabled />
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item label="数量">
                          <a-input :value="gx.rebarNum" disabled />
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row> -->
              </div>
              <div
                v-if="item.showInfo == 'GangJinJiaGong'"
                v-loading="loading[item.id]"
                class="table-container"
              >
                <vxe-table
                  align="center"
                  border
                  :data="formData[item.id].produceList"
                  show-overflow
                  show-header-overflow
                  :column-config="{ resizable: true }"
                  class="scrollbarStyle"
                  ref="xTable"
                >
                  <vxe-column field="rebarModelDesc" title="钢筋型号">
                  </vxe-column>
                  <vxe-column field="rebarDiameterDesc" title="钢筋直径(mm)">
                  </vxe-column>
                  <vxe-column field="rebarTypeDesc" title="钢筋品种">
                  </vxe-column>
                  <vxe-column field="rebarNum" title="数量（kg）"> </vxe-column>
                </vxe-table>
              </div>
              <!-- 吊装 【可编辑】 -->
              <div
                class="base-info-container"
                v-if="
                  item.showInfo == 'DiaoZhuang' && item.currentStatus == '1'
                "
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 生产线 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item
                      label="生产线"
                      :prop="item.id + '.prodLineNum'"
                      :rules="{
                        required: true,
                        message: '请选择生产线',
                      }"
                    >
                      <a-select
                        placeholder="请选择生产线"
                        :filter-option="filterOption"
                        v-model="formData[item.id].prodLineNum"
                      >
                        <a-select-option
                          :value="gxs.dicValue"
                          :label="gxs.dicDesc"
                          v-for="gxs in formData[item.id].dzSource"
                          :key="gxs.id"
                        >
                          {{ gxs.dicDesc }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 吊装 【不可编辑】 -->
              <div
                class="base-info-container"
                v-if="
                  item.showInfo == 'DiaoZhuang' && item.currentStatus != '1'
                "
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 生产线 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="生产线">
                      <a-input
                        v-model="formData[item.id].prodLineNumDesc"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 模版安装 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'MoBanAnZhuang'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 合模时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="合模时间">
                      <a-input disabled v-model="formData[item.id].closeTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 浇筑时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="浇筑时间">
                      <a-input disabled v-model="formData[item.id].pourTime" />
                    </a-form-model-item>
                  </a-col>
                  <!--  开模时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label=" 开模时间">
                      <a-input disabled v-model="formData[item.id].openTime" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 要料申请 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'YaoLiaoShenQing'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 强度等级 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="强度等级">
                      <a-input
                        disabled
                        v-model="formData[item.id].strengthGradeDesc"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 方量 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="方量(m³)">
                      <a-input
                        disabled
                        v-model="formData[item.id].designVolume"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 坍落度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="坍落度(mm)">
                      <a-input disabled v-model="formData[item.id].slump" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <div
                v-if="item.showInfo == 'YaoLiaoShenQing'"
                v-loading="loading[item.id]"
                class="table-container"
              >
                <vxe-table
                  align="center"
                  border
                  :data="formData[item.id].tableData"
                  show-overflow
                  show-header-overflow
                  :column-config="{ resizable: true }"
                  class="scrollbarStyle"
                  ref="xTable"
                >
                  <vxe-column title="名称">
                    <template #default="{ row }">
                      设计配合比（kg/m³）
                    </template>
                  </vxe-column>
                  <vxe-column field="cement" title="水泥"> </vxe-column>
                  <vxe-column field="naturalSand" title="细骨料"> </vxe-column>
                  <vxe-column field="flyAsh" title="粉煤灰"> </vxe-column>
                  <vxe-column field="water" title="水"> </vxe-column>
                  <vxe-column field="zhongshizi" title="粗骨料(5-10)mm">
                  </vxe-column>
                  <vxe-column field="dashizi" title="粗骨料(10-20)mm">
                  </vxe-column>
                  <vxe-column field="waterReducingAgent" title="外加剂">
                  </vxe-column>
                </vxe-table>
              </div>
              <!-- 拌和生产 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'BanHe'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 开始时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="开始时间">
                      <a-input disabled :value="formData[item.id].startTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 结束时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="结束时间">
                      <a-input disabled :value="formData[item.id].endTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 总方量 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="总方量(m³)">
                      <a-input
                        disabled
                        :value="
                          Number(formData[item.id].totalVolume).toFixed(2)
                        "
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 总盘数 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="总盘数">
                      <a-input
                        disabled
                        :value="formData[item.id].total || 0 + '盘'"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 初级预警 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="初级预警">
                      <a-input
                        disabled
                        :value="formData[item.id].chuTotal || 0 + '盘'"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 中级预警 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="中级预警">
                      <a-input
                        disabled
                        :value="formData[item.id].zhongTotal || 0 + '盘'"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 高级预警 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="高级预警">
                      <a-input
                        disabled
                        :value="formData[item.id].gaoTotal || 0 + '盘'"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 鱼雷罐运输 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'YuLeiGuanYunShu'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 总次数  -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="总次数(次)">
                      <a-input disabled :value="formData[item.id].total" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 开始时间    -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="开始时间">
                      <a-input disabled :value="formData[item.id].startTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 结束时间    -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="结束时间">
                      <a-input disabled :value="formData[item.id].endTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 总重量/t    -->
                  <!-- <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="总重量(t)">
                      <a-input disabled :value="formData[item.id].weight" />
                    </a-form-model-item>
                  </a-col> -->
                  <!-- 总方量   -->
                  <!-- <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="总方量(m³)">
                      <a-input
                        disabled
                        :value="Number(formData[item.id].formul).toFixed(2)"
                      />
                    </a-form-model-item>
                  </a-col> -->
                </a-row>
              </div>
              <!-- 布料 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'BuLiao'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 布料总次数  -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="布料总次数(次)">
                      <a-input disabled v-model="formData[item.id].total" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 布料总重量 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="布料总重量(t)">
                      <a-input disabled v-model="formData[item.id].weightSum" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 布料开始时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="布料开始时间">
                      <a-input disabled v-model="formData[item.id].startTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 布料结束时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="布料结束时间">
                      <a-input disabled v-model="formData[item.id].endTime" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 振捣 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'ZhenDao'"
                v-loading="loading[item.id]"
              >
                <!-- 振捣总次数 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="振捣总次数(次)">
                    <a-input v-model="formData[item.id].total" disabled />
                  </a-form-model-item>
                </a-col>
                <!-- 振捣总次数 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="振捣评率(Hz)">
                    <a-input v-model="formData[item.id].frequency" disabled />
                  </a-form-model-item>
                </a-col>
                <!-- 振捣开始时间 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="振捣开始时间">
                    <a-input disabled v-model="formData[item.id].startTime" />
                  </a-form-model-item>
                </a-col>
                <!-- 振捣结束时间 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="振捣结束时间">
                    <a-input disabled v-model="formData[item.id].endTime" />
                  </a-form-model-item>
                </a-col>
              </div>
              <!-- 模版拆除 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'MoBanChaiChu'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!--  开模时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label=" 开模时间">
                      <a-input disabled v-model="formData[item.id].openTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 浇筑时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="浇筑时间">
                      <a-input disabled v-model="formData[item.id].pourTime" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 合模时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="合模时间">
                      <a-input disabled v-model="formData[item.id].closeTime" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 蒸养 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'ZhengYang'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!--  养生类型 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label=" 养生类型">
                      <a-input
                        disabled
                        :value="formData[item.id].type == 1 ? '蒸汽' : '喷淋'"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!--  开始时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label=" 开始时间">
                      <a-input
                        disabled
                        v-model="formData[item.id].minColTime"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 结束时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="结束时间">
                      <a-input
                        disabled
                        v-model="formData[item.id].maxColTime"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 养生时长 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="养生时长(min)">
                      <a-input
                        disabled
                        v-model="formData[item.id].hourLength"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 平均温度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="平均温度(℃)">
                      <a-input disabled v-model="formData[item.id].avgTmp" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 最高温度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="最高温度(℃)">
                      <a-input disabled v-model="formData[item.id].maxTmp" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 最低温度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="最低温度(℃)">
                      <a-input disabled v-model="formData[item.id].minTmp" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 平均湿度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="平均湿度(%RH)">
                      <a-input disabled v-model="formData[item.id].avgRh" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 最低湿度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="最低湿度(%RH)">
                      <a-input disabled v-model="formData[item.id].minRh" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 最高湿度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="最高湿度(%RH)">
                      <a-input disabled v-model="formData[item.id].maxRh" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 喷淋 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'PenLin'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!--  开始时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="开始时间">
                      <a-input
                        disabled
                        v-model="formData[item.id].minColTime"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 结束时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="结束时间">
                      <a-input
                        disabled
                        v-model="formData[item.id].maxColTime"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 养生时长 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="养生时长(min)">
                      <a-input
                        disabled
                        v-model="formData[item.id].hourLength"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 平均温度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="平均温度(℃)">
                      <a-input disabled v-model="formData[item.id].avgTmp" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 最高温度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="最高温度(℃)">
                      <a-input disabled v-model="formData[item.id].maxTmp" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 最低温度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="最低温度(℃)">
                      <a-input disabled v-model="formData[item.id].minTmp" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 同养试块试验 -->
              <div
                class="table-container"
                v-if="item.showInfo == 'TongYangShiKuaiShiYan'"
                v-loading="loading[item.id]"
              >
                <vxe-table
                  align="center"
                  border
                  :data="formData[item.id].tableData"
                  show-overflow
                  show-header-overflow
                  :column-config="{ resizable: true }"
                  class="scrollbarStyle"
                  ref="xTable"
                >
                  <vxe-column type="expand" width="40">
                    <template #content="{ row }">
                      <vxe-table
                        ref="childTable"
                        min-height="120px"
                        max-height="528px"
                        class="scrollbarStyle"
                        align="center"
                        show-overflow
                        show-header-overflow
                        :data="row.dataList"
                        :column-config="{ resizable: true }"
                      >
                        <vxe-column field="kyhz" title="抗压荷载(Kn)">
                        </vxe-column>
                        <vxe-column field="kyqd" title="抗压强度(MPa)">
                        </vxe-column>
                      </vxe-table>
                    </template>
                  </vxe-column>
                  <vxe-column type="seq" width="60" title="序号"></vxe-column>
                  <vxe-column field="curingAge" title="龄期(天)"> </vxe-column>
                  <vxe-column field="trialDate" title="试验时间"> </vxe-column>
                  <vxe-column field="testValue" title="强度代表值(MPa)">
                  </vxe-column>
                  <vxe-column field="result" title="试验结果">
                    <template #default="{ row }">
                      <div v-if="row.result == 0">合格</div>
                      <div v-if="row.result == 1">不合格</div>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
              <!-- 回弹强度检测 【可编辑】 -->
              <div
                class="base-info-container"
                v-if="
                  item.showInfo == 'HuiTanQiangDuJianCe' &&
                  item.currentStatus == '1'
                "
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 请输入龄期 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                    <a-form-model-item
                      label="龄期(天)"
                      :prop="item.id + '.age'"
                      :rules="{
                        required: true,
                        message: '请输入龄期',
                      }"
                    >
                      <a-input
                        placeholder="请输入龄期"
                        v-model="formData[item.id].age"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 平均碳化深度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                    <a-form-model-item
                      label="平均碳化深度(mm)"
                      :prop="item.id + '.carbonization'"
                      :rules="{
                        required: true,
                        message: '请输入平均碳化深度',
                      }"
                    >
                      <a-input
                        placeholder="请输入平均碳化深度"
                        v-model="formData[item.id].carbonization"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <div class="subtitle">测区混凝土抗压强度换算值(MPa)</div>
                  </a-col>
                  <!-- 平均值 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                    <a-form-model-item
                      label="平均值"
                      :prop="item.id + '.averageValue'"
                      :rules="{
                        required: true,
                        message: '请输入平均值',
                      }"
                    >
                      <a-input
                        type="Number"
                        placeholder="请输入平均值"
                        v-model="formData[item.id].averageValue"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 标准差 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                    <a-form-model-item
                      label="标准差"
                      :prop="item.id + '.standardDeviation'"
                      :rules="{
                        required: true,
                        message: '请输入标准差',
                      }"
                    >
                      <a-input
                        type="Number"
                        placeholder="请输入标准差"
                        v-model="formData[item.id].standardDeviation"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 最小值 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                    <a-form-model-item
                      label="最小值"
                      :prop="item.id + '.minimumValue'"
                      :rules="{
                        required: true,
                        message: '请输入最小值',
                      }"
                    >
                      <a-input
                        type="Number"
                        placeholder="请输入最小值"
                        v-model="formData[item.id].minimumValue"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <div class="subtitle">构件现龄期混凝土强度推定值(MPa)</div>
                  </a-col>
                  <!-- 推定值 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" :xxl="8">
                    <a-form-model-item
                      label="推定值"
                      :prop="item.id + '.inferredValue'"
                      :rules="{
                        required: true,
                        message: '请输入推定值',
                      }"
                    >
                      <a-input
                        type="Number"
                        placeholder="请输入推定值"
                        v-model="formData[item.id].inferredValue"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <a-form-model-item
                      label="上传附件"
                      :prop="item.id + '.file'"
                      :rules="{
                        required: false,
                        message: '请选择文件',
                      }"
                    >
                      <bjUploadFile
                        :count="6"
                        v-model="formData[item.id].file"
                        @change="upLoadFile($event, item)"
                      ></bjUploadFile>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 回弹强度检测 【不可编辑】 -->
              <div
                class="base-info-container"
                v-if="
                  item.showInfo == 'HuiTanQiangDuJianCe' &&
                  item.currentStatus != '1'
                "
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 龄期 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="龄期(天)">
                      <a-input v-model="formData[item.id].age" disabled />
                    </a-form-model-item>
                  </a-col>
                  <!-- 平均碳化深度 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="平均碳化深度(mm)">
                      <a-input
                        v-model="formData[item.id].carbonization"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <div class="subtitle">测区混凝土抗压强度换算值(MPa)</div>
                  </a-col>
                  <!-- 平均值 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="平均值">
                      <a-input
                        v-model="formData[item.id].averageValue"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 标准差 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="标准差">
                      <a-input
                        v-model="formData[item.id].standardDeviation"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 最小值 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="最小值">
                      <a-input
                        v-model="formData[item.id].minimumValue"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <div class="subtitle">构件现龄期混凝土强度推定值(MPa)</div>
                  </a-col>
                  <!-- 推定值 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="推定值">
                      <a-input
                        v-model="formData[item.id].inferredValue"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <a-form-model-item label="上传附件">
                      <bjUploadFile
                        v-model="formData[item.id].file"
                        :viewMode="true"
                        @preview="viewFile($event)"
                        @download="download($event)"
                        :replaceFields="{
                          fileName: 'realFileName',
                          fileSize: 'fileSize',
                          fileType: 'fileType',
                          fileUrl: 'fileUrl',
                        }"
                      ></bjUploadFile>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 张拉 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'ZhangLa'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 张拉次数 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="张拉次数">
                      <a-input v-model="formData[item.id].total" disabled />
                    </a-form-model-item>
                  </a-col>
                  <!-- 合格数  -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="合格数">
                      <a-input v-model="formData[item.id].qualified" disabled />
                    </a-form-model-item>
                  </a-col>
                  <!-- 不合格数  -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="不合格数">
                      <a-input
                        v-model="formData[item.id].unqualified"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 合格率  -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="合格率(%)">
                      <a-input v-model="formData[item.id].rate" disabled />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 压浆 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'YaJiang'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 压浆次数 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="压浆次数">
                      <a-input v-model="formData[item.id].total" disabled />
                    </a-form-model-item>
                  </a-col>
                  <!-- 合格数  -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="合格数">
                      <a-input v-model="formData[item.id].qualified" disabled />
                    </a-form-model-item>
                  </a-col>
                  <!-- 不合格数  -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="不合格数">
                      <a-input
                        v-model="formData[item.id].unqualified"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 合格率  -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="合格率(%)">
                      <a-input v-model="formData[item.id].rate" disabled />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 存梁 【可编辑】 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'CunLiang' && item.currentStatus == '1'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 存梁完成时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item
                      label="存梁完成时间"
                      :prop="item.id + '.scwcsj'"
                      :rules="{
                        required: true,
                        message: '请选择存梁完成时间',
                      }"
                    >
                      <a-date-picker
                        v-model="formData[item.id].scwcsj"
                        style="width: 100%"
                        format="YYYY-MM-DD HH:mm:ss"
                        valueFormat="YYYY-MM-DD HH:mm:ss"
                        :show-time="{
                          defaultValue: moment('00:00:00', 'HH:mm:ss'),
                        }"
                        placeholder="请选择存梁完成时间"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 位置 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item
                      label="位置"
                      :prop="item.id + '.storageArea'"
                      :rules="{
                        required: true,
                        message: '请选择位置',
                      }"
                    >
                      <a-select
                        placeholder="请选择位置"
                        :filter-option="filterOption"
                        v-model="formData[item.id].storageArea"
                      >
                        <a-select-option
                          :value="gxs.id"
                          :label="gxs.areaDesc"
                          v-for="gxs in formData[item.id].ylSource"
                          :key="gxs.id"
                        >
                          {{ gxs.areaDesc }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 存梁 【不可编辑】 -->
              <div
                class="base-info-container"
                v-if="item.showInfo == 'CunLiang' && item.currentStatus != '1'"
                v-loading="loading[item.id]"
              >
                <a-row>
                  <!-- 存梁完成时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="存梁完成时间">
                      <a-input v-model="formData[item.id].scwcsj" disabled />
                    </a-form-model-item>
                  </a-col>
                  <!-- 位置 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="位置">
                      <a-input
                        v-model="formData[item.id].storageAreaDesc"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </a-form-model>
      </div>
      <div class="footer">
        <a-button @click="closeModal()">取消 </a-button>
        <a-button type="primary" @click="onSubmit()" :loading="submitLoading">
          确定
        </a-button>
      </div>
      <!-- 返回顶部按钮 -->
      <a class="go-top-button" href="#topSpace" title="返回顶部">
        <a-icon type="arrow-up" style="font-size: 18px" />
      </a>
    </div>

    <!-- 明细弹窗 -->
    <detailModal
      :visible.sync="detailModalVisible"
      :dataSource="detailsSource"
    ></detailModal>
    <!-- 模版安装 -->
    <mbzhModal :visible.sync="mbazModalVisible" :dataSource="rows"></mbzhModal>
    <!-- 鱼雷罐 -->
    <chiselRecordModal
      :visible.sync="chiselRecordModalVisible"
      :dataSource="rows"
    ></chiselRecordModal>
    <!-- 张拉明细 -->
    <zlDetailModal
      :visible.sync="zlDetailModalVisible"
      :dataSource="detailsSource"
    ></zlDetailModal>
    <!-- 压浆明细 -->
    <yjDetailModal
      :visible.sync="yjDetailModalVisible"
      :dataSource="detailsSource"
    ></yjDetailModal>
    <!-- 喷淋养生明细 -->
    <plDetailModal
      :visible.sync="plDetailModalVisible"
      :dataSource="rows"
    ></plDetailModal>
    <!-- 蒸汽养生明细 -->
    <zqDetailModal
      :visible.sync="zqDetailModalVisible"
      :dataSource="rows"
    ></zqDetailModal>
    <!-- 布料明细 -->
    <blDetailModal
      :visible.sync="blDetailModalVisible"
      :dataSource="rows"
    ></blDetailModal>
    <!-- 振捣明细 -->
    <zdDetailModal
      :visible.sync="zdDetailModalVisible"
      :dataSource="rows"
    ></zdDetailModal>
    <!-- 实验数据 -->
    <syModal :visible.sync="syModalVisible" :dataSource="rows"></syModal>
  </todo-page>
</template>

<script>
import detailModal from "./handle/detailModal.vue";
import chiselRecordModal from "./handle/chiselRecordModal";
import zlDetailModal from "./handle/zlDetailModal";
import mbzhModal from "./handle/mbzhModal";
import yjDetailModal from "./handle/yjDetailModal";
import zqDetailModal from "./handle/zqDetailModal";
import plDetailModal from "./handle/plDetailModal";
import blDetailModal from "./handle/blDetailModal";
import zdDetailModal from "./handle/zdDetailModal";
import collapseHeader from "./handle/collapseHeader";
import syModal from "./handle/syModal";
import flowList from "@/components/flow-list";
import bjUploadFile from "@/components/bj-upload-file";
import { getLoginData } from "@/tools";
import _ from "lodash";
import moment from "moment";
import { downFileByUrl, commonViewFile } from "@/utils";
import { getDickeyList } from "@/api/common.js";
import { uploadFileByType } from "@/api/wisdom-beam/material-app";
import { filePath } from "@/api/wisdom-beam/security-app.js";
import {
  getTraceabilityDetail,
  getHeadFlowList,
  getBodyFlowList,
  getXianChangJieDanOPInfo,
  approveOrder,
  getShowInfoByFlag,
  getGJJGInfo,
  getYLSQInfo,
  queryDataByComponentParts,
  queryDataByComparts,
  queryStaticsByComparts,
  clothDataStatics,
  cboostDataStatics,
  plDataByComparts,
  zyDataByComparts,
  queryZlDataByComponentParts,
  queryYjDataByComponentParts,
  getYLSelect,
  getTestComponentParts,
} from "@/api/wisdom-beam/quality-app";
export default {
  components: {
    flowList,
    bjUploadFile,
    collapseHeader,
    detailModal,
    mbzhModal,
    chiselRecordModal,
    zlDetailModal,
    yjDetailModal,
    plDetailModal,
    zqDetailModal,
    blDetailModal,
    zdDetailModal,
    syModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    rows: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          Promise.all([this.getHeadFlowList(), this.getBodyFlowList()])
            .then((result) => {})
            .finally((_) => {});
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      detailModalVisible: false,
      zlDetailModalVisible: false,
      yjDetailModalVisible: false,
      chiselRecordModalVisible: false,
      zqDetailModalVisible: false,
      plDetailModalVisible: false,
      blDetailModalVisible: false,
      zdDetailModalVisible: false,
      mbazModalVisible: false,
      syModalVisible: false,
      itemId: "",
      detailsSource: [],
      //头部流程
      flowSource: [],
      //锚点定位标识
      anchorPointEmu: {},
      //tabs
      activeKey: [],
      formData: {},
      rules: {},
      //页面提流程数据
      pageFlowListSource: [],
      clonePageFlowListSource: [],
      //现场接单
      gXInfoSource: {},
      //存梁
      ylInfoSource: {},
      eventsEmu: {},
      loading: {},
      submitLoading: false,
    };
  },

  methods: {
    moment,
    //顶部流程点击事件
    flowListClick(ev) {
      let { $$anchorPoint } = ev;
      let dom = document.createElement("a");
      dom.href = `#${$$anchorPoint}`;
      document.body.appendChild(dom);
      dom.click();
      document.body.removeChild(dom);
    },
    //实验数据
    viewTestData(item = {}) {
      this.syModalVisible = true;
    },
    //查看明细
    viewDetails(item = {}) {
      let { id, showInfo } = item;
      let { detailsSource = [] } = this.formData[id];
      this.detailsSource = detailsSource;
      switch (showInfo) {
        //模版安装
        case "MoBanAnZhuang":
          this.mbazModalVisible = true;
          break;

        //开模
        case "MoBanChaiChu":
          this.mbazModalVisible = true;
          break;

        case "BanHe":
          this.detailModalVisible = true;
          break;
        //
        case "YuLeiGuanYunShu":
          this.chiselRecordModalVisible = true;
          break;

        case "BuLiao":
          this.blDetailModalVisible = true;
          break;

        case "ZhenDao":
          this.zdDetailModalVisible = true;
          break;

        //蒸汽养生
        case "ZhengYang":
          this.zqDetailModalVisible = true;
          break;

        //蒸汽养生
        case "PenLin":
          this.plDetailModalVisible = true;
          break;

        //张拉
        case "ZhangLa":
          this.zlDetailModalVisible = true;
          break;

        //压浆
        case "YaJiang":
          this.yjDetailModalVisible = true;
          break;
      }
    },

    //提交
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          let { pageFlowListSource } = this;
          let itemData = pageFlowListSource[pageFlowListSource.length - 1];
          let { showInfo, id } = itemData;
          //参数
          let GXIds = [],
            userIds = "",
            userNames = "",
            scwcsj = "",
            storageArea = "",
            prodLineNum = "",
            averageValue = "",
            standardDeviation = "",
            minimumValue = "",
            inferredValue = "",
            age = "",
            carbonization = "",
            fileInfoIds = "";
          let targetData = this.formData[itemData.id];
          //现场接单
          if (showInfo == "XianChangJieDan") {
            Object.keys(targetData).forEach((key, index) => {
              let item = targetData[key];
              GXIds.push(key);
              item.forEach((v, i) => {
                if (i < item.length - 1) {
                  userIds += v.key + "|";
                  userNames += v.label + "|";
                } else {
                  userIds += v.key;
                  userNames += v.label;
                }
              });
              if (
                index < Object.keys(targetData).length - 1 &&
                item.length > 0
              ) {
                userIds += ",";
                userNames += ",";
              }
            });
          }
          //存梁
          if (showInfo == "CunLiang") {
            scwcsj = targetData.scwcsj;
            storageArea = targetData.storageArea;
          }

          //吊装
          if (showInfo == "DiaoZhuang") {
            prodLineNum = targetData.prodLineNum;
          }

          //回弹强度检测
          if (showInfo == "HuiTanQiangDuJianCe") {
            averageValue = targetData.averageValue;
            standardDeviation = targetData.standardDeviation;
            minimumValue = targetData.minimumValue;
            inferredValue = targetData.inferredValue;
            age = targetData.age;
            carbonization = targetData.carbonization;
            fileInfoIds = targetData.file.map((v) => v.fileId).toString();
          }

          approveOrder({
            controlId: id,
            GXIds: GXIds.toString(),
            userIds,
            userNames,
            scwcsj,
            storageArea,
            prodLineNum,
            averageValue,
            standardDeviation,
            minimumValue,
            inferredValue,
            age,
            carbonization,
            fileInfoIds,
          })
            .then((res) => {
              let { data } = res;
              if (data?.result) {
                this.$message.success("操作成功");
                this.$parent.getData();
                this.closeModal();
              } else {
                let msg = data.result.errorMsg.join("");
                this.$message.error(msg || "操作失败，请稍后重试！");
              }
            })
            .catch((_) => {})
            .finally((_) => {
              this.submitLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    //查询头部流程
    getHeadFlowList() {
      let { id = "" } = this.rows;
      return new Promise((resolve, reject) => {
        getHeadFlowList({ id })
          .then((res) => {
            let { data } = res;
            let list = data?.result || [];
            let activeNums = 0;
            list.forEach((v, i) => {
              let { currentStatus, taskNodeDesc } = v;
              if (currentStatus == "1") {
                v.$$nodeStatus = "current";
              }
              if (currentStatus == "2") {
                v.$$nodeStatus = "active";
                activeNums++;
              }
              if (currentStatus == "2" && list[i + 1]?.currentStatus != "2") {
                v.$$nodeStatus = "half-active";
              }
              this.anchorPointEmu[taskNodeDesc] = `point_id_${i}`;
              v.$$anchorPoint = `point_id_${i}`;
            });
            // if (activeNums == 0) {
            //   list[0].$$nodeStatus = "current";
            // } else {
            //   list[activeNums].$$nodeStatus = "current";
            // }
            this.flowSource = list;
            resolve(data?.result || []);
          })
          .catch((_) => {
            this.flowSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    //查询页面体流程数据
    getBodyFlowList() {
      return new Promise((resolve, reject) => {
        let { id = "" } = this.rows;
        let { anchorPointEmu } = this;
        getBodyFlowList({ id })
          .then((res) => {
            let { data } = res;
            let sourceData = data?.result || [];
            sourceData = sourceData.filter((v) => v.showInfo);
            this.activeKey = sourceData.map((v) => v.id);
            sourceData.forEach((v) => {
              let { id, showInfo, currentStatus, taskNodeDesc } = v;
              if (anchorPointEmu[taskNodeDesc]) {
                sourceData.forEach((item) => {
                  if (item.$$id == anchorPointEmu[taskNodeDesc]) {
                    item.$$id = "";
                  }
                });
                v.$$id = anchorPointEmu[taskNodeDesc];
              } else {
                v.$$id = "";
              }
              this.$set(this.formData, id, {});
              if (this.eventsEmu[showInfo]) {
                this.eventsEmu[showInfo].push(v);
              } else {
                this.eventsEmu[showInfo] = [v];
              }
              if (showInfo == "XianChangJieDan") {
                this.$set(this.gXInfoSource, id, []);
              }
              this.$set(this.loading, id, false);
            });
            this.pageFlowListSource = sourceData;
            this.clonePageFlowListSource = _.cloneDeep(this.pageFlowListSource);
            // //事件派发
            this.eventDispatch();
            resolve(sourceData);
          })
          .catch((_) => {
            this.pageFlowListSource = [];
            this.activeKey = [];
            this.formData = {};
            reject();
          })
          .finally((_) => {});
      });
    },

    //事件派发
    eventDispatch() {
      let { eventsEmu } = this;
      Object.keys(eventsEmu).forEach((key) => {
        eventsEmu[key].forEach((v) => {
          let { currentStatus } = v;
          //信息中心下发任务单
          if (
            key == "XiaDan" ||
            key == "CunLiang" ||
            (key == "DiaoZhuang" && currentStatus != "1") ||
            (key == "HuiTanQiangDuJianCe" && currentStatus != "1")
          ) {
            this.getDetails(v);
          }
          //现场接单【可编辑】
          if (key == "XianChangJieDan" && currentStatus == "1") {
            this.getGXInfo(v);
          }
          //现场接单【不可编辑】
          if (key == "XianChangJieDan" && currentStatus != "1") {
            this.getShowInfoByFlag(v);
          }
          //钢筋加工
          if (key == "GangJinJiaGong") {
            this.getGJJGInfo(v);
          }
          //吊装  可编辑
          if (key == "DiaoZhuang") {
            this.getDZInfo(v);
          }
          // 模版安装 / 模板拆除
          if (key == "MoBanAnZhuang" || key == "MoBanChaiChu") {
            this.getMBAZInfo(v);
          }
          //要料申请
          if (key == "YaoLiaoShenQing") {
            this.getYLSQInfo(v);
          }
          //拌和
          if (key == "BanHe") {
            this.queryDataByComponentParts(v);
          }
          //鱼雷罐
          if (key == "YuLeiGuanYunShu") {
            this.getYLGInfo(v);
          }
          //布料
          if (key == "BuLiao") {
            this.getBLInfo(v);
          }
          //振捣
          if (key == "ZhenDao") {
            this.getZDInfo(v);
          }
          //蒸养
          if (key == "ZhengYang") {
            this.getZYInfo(v, "17");
          }
          //喷淋
          if (key == "PenLin") {
            this.getPlInfo(v, "18");
          }
          //同养试块试验
          if (key == "TongYangShiKuaiShiYan") {
            this.getTestInfo(v);
          }
          //回弹强度检测
          if (key == "HuiTanQiangDuJianCe") {
            this.$set(this.formData[v.id], "age", "");
            this.$set(this.formData[v.id], "carbonization", "");
            this.$set(this.formData[v.id], "averageValue", "");
            this.$set(this.formData[v.id], "standardDeviation", "");
            this.$set(this.formData[v.id], "minimumValue", "");
            this.$set(this.formData[v.id], "inferredValue", "");
            this.$set(this.formData[v.id], "file", []);
          }
          //张拉
          if (key == "ZhangLa") {
            this.getZLInfo(v);
          }
          //压浆
          if (key == "YaJiang") {
            this.getYJInfo(v);
          }
          //存梁 可编辑
          if (key == "CunLiang" && currentStatus == "1") {
            this.getYList(v);
          }
        });
      });
    },

    //查询信息中心下发任务单数局
    getDetails(target = {}) {
      let { id = "" } = this.rows;
      if (!id) {
        return;
      }
      return new Promise((resolve, reject) => {
        this.$set(this.loading, target.id, true);
        getTraceabilityDetail({ id })
          .then((res) => {
            let { data } = res;
            let {
              prodLineNumDesc = "",
              averageValue = "",
              standardDeviation = "",
              minimumValue = "",
              inferredValue = "",
              age = "",
              carbonization = "",
              configFiles = [],
            } = data?.result?.lcTaskManagerExtend || {};
            switch (target.showInfo) {
              //吊装
              case "DiaoZhuang":
                this.$set(
                  this.formData[target.id],
                  "prodLineNumDesc",
                  prodLineNumDesc
                );
                break;
              //回弹强度检测
              case "HuiTanQiangDuJianCe":
                this.$set(
                  this.formData[target.id],
                  "averageValue",
                  averageValue
                );
                this.$set(
                  this.formData[target.id],
                  "standardDeviation",
                  standardDeviation
                );
                this.$set(
                  this.formData[target.id],
                  "minimumValue",
                  minimumValue
                );
                this.$set(
                  this.formData[target.id],
                  "inferredValue",
                  inferredValue
                );
                this.$set(this.formData[target.id], "age", age);
                this.$set(this.formData[target.id], "file", configFiles || []);
                this.$set(
                  this.formData[target.id],
                  "carbonization",
                  carbonization
                );
                break;
              default:
                this.$set(this.formData, target.id, data?.result || {});
                break;
            }

            resolve(data?.result || {});
          })
          .catch((_) => {
            this.$set(this.formData, target.id, {});
            reject();
          })
          .finally((_) => {
            this.$set(this.loading, target.id, false);
          });
      });
    },

    //现场接单 可操作页面查看接口
    getGXInfo(target = {}) {
      let { id = "" } = this.rows;
      return new Promise((resolve, reject) => {
        getXianChangJieDanOPInfo({ id })
          .then((res) => {
            let { data } = res;
            let source = data?.result || [];
            source.forEach((v) => {
              let { taskNodeUser, taskNodeUsername } = v;
              let keys = taskNodeUser.split(",");
              let values = taskNodeUsername.split(",");
              let selectData = [];
              let checkUser = [];
              values.forEach((item, index) => {
                selectData.push({
                  key: keys[index],
                  value: item,
                });
                checkUser.push({
                  key: keys[index],
                  label: item,
                });
              });
              v.$$select = selectData;
              this.formData[target.id][v.taskNodeId] = checkUser;
            });
            this.$set(this.gXInfoSource, target.id, source);
            resolve();
          })
          .catch((_) => {
            this.$set(this.gXInfoSource, target.id, []);
            reject();
          })
          .finally((_) => {});
      });
    },

    //现场接单 不可操作页面查看接口
    getShowInfoByFlag(target = {}) {
      let { id = "" } = this.rows;
      return new Promise((resolve, reject) => {
        getShowInfoByFlag({ id })
          .then((res) => {
            let { data } = res;
            let source = data?.result || [];
            this.$set(this.gXInfoSource, target.id, source);
            resolve();
          })
          .catch((_) => {
            this.$set(this.gXInfoSource, target.id, []);
            reject();
          })
          .finally((_) => {});
      });
    },

    //钢筋加工
    getGJJGInfo(target = {}) {
      let { bridgeName, amClass, span, componentParts } = this.rows;
      getGJJGInfo({ bridgeName, amClass, span, componentParts })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, {});
        });
    },

    //吊装
    getDZInfo(target = {}) {
      getDickeyList({ dictKey: "TASK_MANAGER_TZ" })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData[target.id], "prodLineNum", undefined);
          this.$set(this.formData[target.id], "dzSource", data?.result || []);
        })
        .catch((_) => {
          this.$set(this.formData[target.id], "prodLineNum", undefined);
          this.$set(this.formData[target.id], "dzSource", []);
        })
        .finally((_) => {});
    },

    //要料申请
    getYLSQInfo(target = {}) {
      let { id } = this.rows;
      getYLSQInfo({ id })
        .then((res) => {
          let { data } = res;
          this.$set(data?.result, "tableData", [data?.result || {}]);
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, {
            tableData: [],
          });
        });
    },

    //模版安装
    getMBAZInfo(target = {}) {
      let { componentParts } = this.rows;
      queryDataByComparts({
        componentParts: componentParts,
      })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, data?.result || {});
        });
    },

    //拌和(统计、列表)
    queryDataByComponentParts(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        queryDataByComponentParts({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let {
              total,
              chuTotal,
              zhongTotal,
              gaoTotal,
              totalVolume,
              startTime,
              endTime,
            } = data?.result || {};
            this.$set(this.formData[id], "startTime", startTime);
            this.$set(this.formData[id], "endTime", endTime);
            this.$set(this.formData[id], "totalVolume", totalVolume);
            this.$set(this.formData[id], "total", total);
            this.$set(this.formData[id], "chuTotal", chuTotal);
            this.$set(this.formData[id], "zhongTotal", zhongTotal);
            this.$set(this.formData[id], "gaoTotal", gaoTotal);
            this.$set(
              this.formData[id],
              "detailsSource",
              data?.result?.data || []
            );
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //鱼雷罐
    getYLGInfo(target = {}) {
      let { componentParts } = this.rows;
      queryStaticsByComparts({
        componentParts: componentParts,
      })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, data?.result || {});
        });
    },

    //布料
    getBLInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        if (!id) {
          return;
        }
        clothDataStatics({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let { endTime, startTime, weightHand, total, weightSum } =
              data?.result || {};
            this.$set(this.formData[id], "startTime", startTime);
            this.$set(this.formData[id], "endTime", endTime);
            this.$set(this.formData[id], "weightHand", weightHand);
            this.$set(this.formData[id], "weightSum", weightSum);
            this.$set(this.formData[id], "total", total);
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //振捣
    getZDInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        if (!id) {
          return;
        }
        cboostDataStatics({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let { endTime, startTime, total, frequency } = data?.result || {};
            this.$set(this.formData[id], "frequency", frequency);
            this.$set(this.formData[id], "startTime", startTime);
            this.$set(this.formData[id], "endTime", endTime);
            this.$set(this.formData[id], "total", total);
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },
    //蒸气养生
    getZYInfo(target = {}, equType) {
      let { componentParts } = this.rows;
      zyDataByComparts({ componentParts, equType })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, {});
        });
    },
    //喷淋养生
    getPlInfo(target = {}, equType) {
      let { componentParts } = this.rows;
      plDataByComparts({ componentParts, equType })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, {});
        });
    },

    //同养试块试验
    getTestInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        getTestComponentParts({
          componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            this.$set(this.formData[id], "tableData", data?.result || []);
            resolve();
          })
          .catch((_) => {
            this.$set(this.formData[id], "tableData", []);
            reject();
          });
      });
    },

    //张拉
    getZLInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        queryZlDataByComponentParts({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let { qualified, unqualified, rate, total } = data?.result || {};
            this.$set(this.formData[id], "qualified", qualified);
            this.$set(this.formData[id], "unqualified", unqualified);
            this.$set(this.formData[id], "rate", rate);
            this.$set(this.formData[id], "total", total);
            this.$set(
              this.formData[id],
              "detailsSource",
              data?.result?.data || []
            );
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //压浆
    getYJInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        queryYjDataByComponentParts({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let { qualified, unqualified, rate, total } = data?.result || {};
            this.$set(this.formData[id], "qualified", qualified);
            this.$set(this.formData[id], "unqualified", unqualified);
            this.$set(this.formData[id], "rate", rate);
            this.$set(this.formData[id], "total", total);
            this.$set(
              this.formData[id],
              "detailsSource",
              data?.result?.data || []
            );
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //存梁 可操作页面查看接口
    getYList(target = {}) {
      let { id } = this.rows;
      getYLSelect({ id })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData[target.id], "scwcsj", "");
          this.$set(this.formData[target.id], "ylSource", data?.result || []);
        })
        .catch((_) => {
          this.$set(this.formData[target.id], "scwcsj", "");
          this.$set(this.formData[target.id], "ylSource", []);
        });
    },

    //关闭页面
    closeModal() {
      this.detailModalVisible = false;
      this.zlDetailModalVisible = false;
      this.yjDetailModalVisible = false;
      this.chiselRecordModalVisible = false;
      this.zqDetailModalVisible = false;
      this.plDetailModalVisible = false;
      this.blDetailModalVisible = false;
      this.zdDetailModalVisible = false;
      this.itemId = "";
      this.detailsSource = [];
      //头部流程
      this.flowSource = [];
      //锚点定位标识
      this.anchorPointEmu = {};
      //tabs
      this.activeKey = [];
      this.formData = {};
      this.rules = {};
      //页面提流程数据
      this.pageFlowListSource = [];
      this.clonePageFlowListSource = [];
      //现场接单
      this.gXInfoSource = {};
      this.eventsEmu = {};
      this.loading = {};
      this.$refs.form.clearValidate();
      this.$emit("update:visible", false);
    },
    //附件上传
    upLoadFile({ file, index }, item) {
      let { id } = item;
      let formData = new FormData();
      formData.append("uploadFile", file);
      this.$set(this.formData[id]["file"][index], "loading", true);
      return new Promise((resolve, reject) => {
        uploadFileByType(formData, "HuiTanQiangDuJianCe")
          .then((res) => {
            let { data } = res;
            let source = data?.result || {};
            let { fileId, fileName, groupName } = source;
            this.$set(this.formData[id]["file"], index, {
              ...this.formData[id]["file"][index],
              fileId,
              groupName,
              requestFileName: fileName,
            });
            resolve();
          })
          .catch((_) => {
            this.$set(this.formData[id]["file"][index], "fail", true);
            reject();
          })
          .finally((_) => {
            this.$set(this.formData[id]["file"][index], "loading", false);
          });
      });
    },

    //下载附件
    download(file) {
      let { realFileName, id } = file;
      filePath(id)
        .then((res) => {
          let fileUrl = res.data?.result || "";
          if (fileUrl)
            downFileByUrl(fileUrl + "&attname=" + realFileName, realFileName);
        })
        .catch((_) => {});
    },
    //附件预览
    viewFile(file) {
      let { id } = file;
      commonViewFile("beam", id);
    },
    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.traceability-handle-container {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  .flex();
  flex-direction: column;
  .go-top-button {
    position: fixed;
    width: 40px;
    height: 40px;
    cursor: pointer;
    .flex();
    align-items: center;
    justify-content: center;
    bottom: 80px;
    right: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
  }
  .header {
    padding: 15px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;
    //折叠面板
    /deep/.ant-collapse {
      border-radius: 0;
      border: none;
      background: #fff;
      .ant-collapse-item {
        display: flex;
        flex-direction: column;
        position: relative;
        border: none;
        border-bottom: 1px solid #e8ebf0;
        &::before {
          position: absolute;
          left: 30px;
          top: 20px;
          content: attr(title);
          font-size: 15px;
          color: #525a5d;
          font-weight: bold;
        }
        .ant-collapse-content-box {
          padding: 0;
        }
        .ant-collapse-header {
          padding: 0;
          margin-left: auto;
          margin-right: 30px;
          border-radius: 0;
          height: 60px;
          .flex();
          align-items: center;
          .collapse-custom-header {
            color: var(--primary-color);
            .flex();
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }
        }
        .ant-collapse-content {
          border: none;
          overflow: inherit;
        }
      }
    }
    //基本信息
    .base-info-container {
      padding: 0 120px 10px 20px;
      .a-col-header {
        color: var(--primary-color);
        font-size: 14px;
        padding-left: 12px;
        .flex();
        align-items: center;
        &::before {
          content: "";
          display: block;
          width: 6px;
          height: 6px;
          background: var(--primary-color);
          border-radius: 50%;
          margin-right: 6px;
        }
      }
      .subtitle {
        padding: 0 0 10px 10px;
      }
    }
    .table-container {
      margin: 0 20px 20px 20px;
    }

    //表单
    /deep/.ant-form-item {
      .flex();
      .ant-input-affix-wrapper {
        width: 100%;
      }
      .ant-form-item-label {
        flex-shrink: 0;
        width: 170px;
        label {
          color: #999999;
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
  .footer {
    border-top: 1px solid #f3f4f6;
    background-color: #fff;
    .flex();
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
}
</style>
